<template>
  <a-modal title="新增用户" :width="640" :visible="visible" :confirm-loading="confirmLoading" @ok="handleSubmit"
    @cancel="handleCancel" okText="提交">
    <a-form :form="form">
      <a-form-item v-bind="formItemLayout">
        <span slot="label">
          用户名&nbsp;
        </span>
        <a-input v-decorator="[
          'username',
          {
            rules: [{ required: true, message: '请输入用户名', whitespace: true }],
          },
        ]" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="初始密码">
        <a-input v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: '请设置初始密码',
              },
            ],
          }]" type="password" placeholder=" 123456" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="手机号">
        <a-input v-decorator="[
          'phone',
          {
            rules: [{ required: true, message: '请输入用户手机号' }], validateTrigger: ['change', 'blur']
          },]" style="width: 100%">
          <a-select slot="addonBefore" v-decorator="['prefix', { initialValue: '86' }]" style="width: 70px">
            <a-select-option value="86">
              +86
            </a-select-option>
            <a-select-option value="87">
              +87
            </a-select-option>
          </a-select>
        </a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout">
        <span slot="label">
          用户角色&nbsp;
        </span>
        <a-input v-decorator="[
          'role',
          {
            rules: [{ required: true, message: '请输入2或3确定用户角色', whitespace: true }], validateTrigger: ['change', 'blur']
          },]" placeholder="请输入2或3（2：老师，3：学生）" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addUser } from '../../api/sysuser'

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      confirmDirty: false,
      autoCompleteResult: [],
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'register' });
  },
  methods: {
    handleSubmit() {
      const {
        form: { validateFields },
      } = this;
      validateFields((errors, values) => {
        if (errors) return this.$message("请填写完整用户信息"); //如果有一个校验不通过，代码将不再往下执行
        //校验通过，调接口传参
        console.log(this.form.getFieldsValue())
        this.confirmLoading = true;
        addUser(this.form.getFieldsValue()).then(res => {
          if (res.code === 0) {
            this.$notification.success({
              message: '添加用户成功',
              description: '添加用户成功'
            })
            this.$parent.$parent.loadAll()
          } else {
            this.$notification.error({
              message: '添加用户失败',
              description: '添加用户失败'
            })
          }
        })
        this.confirmLoading = false;
        this.visible = false;
      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
    create() {
      this.visible = true;
    },
  },
};
</script>
